<template>
	<view class="indiv01-container">
		<view class="uform">
			<view class="tip">
				邮箱注册仅限境外用户参观浏览
			</view>
			<u-form :model="form" ref="uForm">
				<u-form-item prop="name">
					<u-input v-model="form.name" placeholder="请设置用户名" type="text" class="user" />
				</u-form-item>
				<u-form-item prop="psd">
					<u-input v-model="form.psd" placeholder="请设置密码" type="password" />
				</u-form-item>
				<u-form-item prop="email">
					<u-input v-model="form.email" placeholder="请输入邮箱" type="text" />
				</u-form-item>
				<u-form-item prop="yzm" class="yzm">
					<u-input v-model="form.yzm" placeholder="请输入验证码" type="text" />
					<image src="../login/image/qd.jpg" mode=""></image>
				</u-form-item>
				<u-form-item prop="checked" class="checked">
					<u-checkbox v-model="form.checked" shape="square">我已阅读并同意《xxx协议》</u-checkbox>
				</u-form-item>

			</u-form>
		</view>
		<button @click="submit" class="btn">提交</button>
		<view class="foot">
			<text>手机注册（仅限境外用户）</text>
			<text>帮助</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					name: '',
					psd: '',
					email: '',
					yzm: '',
					checked: false
				},
				rules: {
					name: [{
							required: true,
							message: '请输入姓名',
							trigger: ['change', 'blur'],
						},
						{
							asyncValidator: (rule, value, callback) => {
								this.$u.post('/xxx/xxx', {
									name: value
								}).then(res => {
									// 如果验证不通过，需要在callback()抛出new Error('错误提示信息')
									if (res.error) {
										callback(new Error('姓名重复'));
									} else {
										// 如果校验通过，也要执行callback()回调
										callback();
									}
								})
							},
						}
					],
					psd: [{
						required: true,
						min: 6,
						max: 20,
						pattern: /^[0-9a-zA-Z]*$/g,
						message: '密码必须6~20位字符，且同时包含字母和数字',
						trigger: 'change',
						transform(value) {
							return String(value);
						},
					}],

					email: [{
						required: true,
						pattern: /^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/,
						message: '请输入正确的邮箱地址',
						trigger: 'change',
						trigger: ['change', 'blur'],
						transform(value) {
							return String(value);
						}
					}],
					yzm: [{
						required: true,
						pattern: /^[0-9a-zA-Z]*$/g,
						message: '您输入的验证码有误',
						trigger: 'change',
						transform(value) {
							return String(value);
						}
					}]
				}
			}
		},
		methods: {
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		}
	}
</script>

<style scoped>
	.tip {
		margin: 20rpx auto 66rpx;
		font-size: 22rpx;
		color: #fa7500;
		text-align: center;
	}

	.yzm {
		position: relative;
	}

	.yzm image {
		position: absolute;
		width: 120rpx;
		height: 60rpx;
		right: 0;
		top: 10rpx;
	}

	.uform {
		width: 90%;
		margin: 0 auto;
	}

	.checked {
		color: red;
	}

	.btn {
		margin-top: 30rpx;
	}

	button {
		width: 630rpx;
		height: 88rpx;
		background-color: #386fff;
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		border-radius: 50rpx;
	}

	.foot {
		width: 630rpx;
		font-size: 26rpx;
		color: #999;
		justify-content: space-between;
		display: flex;
		margin: 30rpx auto;
	}
</style>
